<template>
    <div class="width1200 margin0auto bgWhite">
        <el-row>
            <el-col :span="20" :offset="2">
                <h1 class="borderLeft paddingLeft15">{{this.initStatus}}{{this.headTitle}}</h1>
            </el-col>
            <el-col :span="20" :offset="2">
                <el-form
                    :model="ruleForm"
                    :rules="rules"
                    ref="ruleForm"
                    label-width="100px"
                    class="demo-ruleForm"
                >
                    <el-form-item label="案例名称" prop="name">
                        <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="专业类型标签" prop="professionTags">
                        <el-input v-model="ruleForm.professionTags" placeholder="请用英文逗号隔开标识分隔"></el-input>
                    </el-form-item>
                    <el-form-item label="项目类型标签" prop="projectTags">
                        <el-input v-model="ruleForm.projectTags" placeholder="请用英文逗号隔开标识分隔"></el-input>
                    </el-form-item>
                    <el-form-item label="项目地址" prop="projectAddressId">
                        <el-input v-model="ruleForm.projectAddressId" placeholder="请带http://"></el-input>
                    </el-form-item>
                    <el-form-item label="成功案例简介" prop="summary">
                        <el-input type="textarea" v-model="ruleForm.summary"></el-input>
                    </el-form-item>
                    <el-form-item label="缩略图" prop="thumb">
                        <el-upload
                            :action="uploadUrl()"
                            list-type="picture-card"
                            :on-preview="handlePictureCardPreview"
                            :on-success="successUpload"
                            :limit=1
                            :on-remove="handleRemove">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisible">
                            <img width="100%" :src="dialogImageUrl" alt="">
                        </el-dialog>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import { serverBaseUrl } from "src/common/setting";
export default {
    name:'AddNewSolute',
    data() {
        //手机号码
    var checkWebsite = (rule, value, callback) => {
        let websiteReg = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/
        if (value === '') {
            callback(new Error('请输入网址'));
        }else  if (websiteReg.test(value)) {
        callback()
        } else {
        callback(new Error('网址格式不正确，请带http://'))
        }
    }
    return {
        initStatus:'',//新增/编辑
        headTitle:'', //标题/服务设备
        dialogImageUrl: '',
        dialogVisible: false,
        thumb:'',
        ruleForm: {
          name: '',
          professionTags: '',
          projectAddressId: '',
          projectTags: '',
          summary:'',
        },
        rules: {
          name: [
            { required: true, message: '案例名称不能为空', trigger: 'blur' },
          ],
          projectAddressId:[{trigger: 'blur',validator: checkWebsite}],
        }
    };
    
  },
    mounted () {
        this.initData()
    },
    methods: {
        // 初始化数据
        initData(){
            // const routerParams = this.$route.query.mallCode
            if(this.$route.query.type==0){
                this.initStatus = '新增'
            }else if( this.$route.query.type==1 ){
                this.initStatus = '编辑'
            }
            this.headTitle = this.$route.query.title
        },
        //点击提交
        submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
              let professionTags=JSON.stringify( this.ruleForm.professionTags.split(',') );//注split可以用字符或字符串分割
              let projectTags=JSON.stringify( this.ruleForm.projectTags.split(',') );//注split可以用字符或字符串分割
              let professionTags2 = professionTags.replace(/\[|]/g,'').replace(/^\"|\"$/g,'')
              let projectTags2 = projectTags.replace(/\[|]/g,'').replace(/^\"|\"$/g,'')
              let dataObj = {
                'name':this.ruleForm.name,
                'professionTags':professionTags2,
                'projectTags':projectTags2,
                'projectAddressId':this.ruleForm.projectAddressId,
                'summary':this.ruleForm.summary,
                'thumb':this.thumb,
              }
                this.subFormData(dataObj);
            // alert('submit!');
          } else {
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      //提交表单数据
    //   subFormData(dataObj)
        async subFormData(dataObj){
            const {$api } = this;
            let tabStatus = this.$route.query.tabStatus;
            if(tabStatus == "solution"){
                const resData = await $api.user.apiCorpSolutionCu(dataObj);
            }else if(tabStatus == "succseeCase"){
                const resData = await $api.user.apiCorpCaseCu(dataObj);
            }else if(tabStatus == "projectServices"){
                const resData = await $api.user.apiCorpProjectCu(dataObj);
            }else if(tabStatus == "commodity"){
                const resData = await $api.user.piCorpDeviceCu(dataObj);
            }
            if(resData.code==0){
                this.$message.success('新增成功');
                this.$router.go(-1);
            }else{
                this.$message.error(resData.msg);
            }
        },
        handleRemove(file, fileList) {
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        uploadUrl() {
            return { serverBaseUrl }.serverBaseUrl + "/admin/upload";
        },
        //成功上传
        successUpload(response, file, fileList){
           this.thumb = response.data;
        }
    }
}
</script>
